<template>
    <view class="pub_page pub_page_bg pub_withdraw pub_header_padding">
        <pub-head :headerConfig="headerConfig" @headerBack="headerBack"></pub-head>
        <pub-dialog v-show="dialogShow" :dialogConfig="dialogConfig" @dialogBack="dialogBack"></pub-dialog>
        <z-paging ref="Zpaging" class="pub_page_scroll page_box" v-model="list" @query="getList"
            :refresher-enabled="false" :fixed="false" :show-loading-more-no-more-view="false" :hide-empty-view="true">
            <div class="input_div">
                <div class="title">输入兑换寄售产品份额</div>
                <div class="inputs">
                    <div class="input">
                        <input type="text" v-model="exchangeInfo.num">
                    </div>
                </div>
                <div class="msg">当前旺票：{{ userInfo.consumeTicket || 0 }}，本次兑换所需要 {{exchangeProNum}} 张旺票</div>
            </div>
            <div class="input_div">
                <div class="title">交易账户</div>
                <div class="inputs">
                    <div class="input">
                        <input type="text" v-model="exchangeInfo.account" maxlength="12">
                    </div>
                </div>
                <div class="msg">温馨提示:交易账户需交易中心实名认证后点击进入可获取个人交易账户，属于3开头12位账户，一定要填写正确的用户编码，如造成损失，自行承担。</div>
            </div>
            <div class="input_div">
                <div class="title">二级密码</div>
                <div class="inputs">
                    <div class="input">
                        <input type="password" v-model="exchangeInfo.payPassword" maxlength="6">
                    </div>
                </div>
            </div>
            <div class="input_div">
                <div class="title">交易中心手机号账户</div>
                <div class="inputs">
                    <div class="input">
                        <input type="text" v-model="userInfo.account" disabled>
                    </div>
                </div>
                <br>
                <br>
                <div class="pub_btn" @click="toDeal('to_exchange')">确认</div>
            </div>
            <br>
            <br>
            <div class="lis_div">
                <div class="lis_box">
                    <div class="li_td li_th">
                        <div class="li li_big">时间</div>
                        <div class="li">数量</div>
                        <div class="li">状态</div>
                    </div>
                    <div class="li_td" v-for="(li, key) in list" :key="key">
                        <div class="li li_big">{{ li.createTime }}</div>
                        <div class="li">{{ li.money }}</div>
                        <div class="li" :style="{color:getStatusInfo(li.status,'color')}">{{ getStatusInfo(li.status) }}
                        </div>
                    </div>
                    <div class="pub_nodata_1" v-if="list.length==0">暂无数据</div>
                </div>
            </div>
            <br>
            <br>
        </z-paging>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '交易中心',//标题栏内容
                left_type: 3,
                title_color: '#000',
                left_content: 'dark',
                header_color: '#fff'
            },
            dialogShow: false,
            dialogType: '',
            dialogConfig: {
                title: '提示',//标题栏内容
                content: ''
            },

            userInfo: '',
            exchangePro: 0,
            exchangeLot: 0,
            exchangeProNum: 0,
            // 兑换相关数据
            exchangeInfo: {
                num: '',
                payPassword: '',
                account: ''
            },
            list: [],
        };
    },
    watch: {
        'exchangeInfo.num': {
            handler() {
                this.exchangeInfo.num = this.exchangeInfo.num.replace(/^(0+)|[^\d]+/g, '');
                let totalNum = Math.round(this.exchangeInfo.num * this.exchangeLot * 100) / 100;
                this.exchangeProNum = Math.round((totalNum + totalNum * this.exchangePro) * 100) / 100;
            },
            immediate: true,
            deep: true
        },
    },
    computed: {},
    onLoad(option) {
        this.getPageInfo();
        this.getConfig();
        setTimeout(() => {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        }, 400);
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    methods: {
        headerBack(data) {
            if (data.type == 'right') { }
        },
        dialogBack(data) {
            // console.log(data);
            this.dialogShow = false;
            if (data.key == 1) {
                this.toDeal(this.dialogType)
            }
        },
        async getPageInfo() {
            const res = await this.$request.get('user/userInfo', {});
            // console.log(res);
            // console.log(res);
            if (res.code == 200) {
                this.userInfo = res.result;
            }
        },
        async getConfig() {
            let configRes = await getApp().getConfigList();
            this.exchangeLot = configRes.withdrawalLot;
            this.exchangePro = configRes.withdrawalPro;
        },
        async getList(pageNo, pageSize) {
            const res = await this.$request.get('user/getWithdrawalsPage', {
                pageNo: pageNo,
                pageSize: pageSize,
            });
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.$refs.Zpaging.complete(res.result.records);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        async toDeal(type, data_1, data_2) {
            switch (type) {
                case 'to_exchange':
                    if (this.exchangeInfo.num == '' || !this.$comFun.ValidateNum(this.exchangeInfo.num)) {
                        this.$comFun.toast('请先填写正确的数量');
                        return;
                    }
                    if (!this.exchangeInfo.account || this.exchangeInfo.account.length != 12) {
                        this.$comFun.toast('请先填写正确的交易账户');
                        return;
                    }
                    if (!this.exchangeInfo.payPassword) {
                        this.$comFun.toast('请先填写二级密码');
                        return;
                    }
                    this.dialogType = 'sure_exchange';
                    this.dialogConfig = {
                        title: '提示',//标题栏内容
                        content: '是否确定兑换？'
                    }
                    this.dialogShow = true;
                    break;
                case 'sure_exchange':
                    this.$comFun.openLoading();
                    const res_2 = await this.$request.post('user/applyWithdrawal', {
                        money: this.exchangeInfo.num,
                        payPassword: this.exchangeInfo.payPassword,
                        account: this.exchangeInfo.account,
                    });
                    // console.log(res_2);
                    this.$comFun.closeLoading();
                    if (res_2.code == 200) {
                        this.exchangeInfo = this.$options.data().exchangeInfo
                        this.$comFun.toast('兑换成功');
                        this.getPageInfo();
                        setTimeout(() => {
                            this.$refs.Zpaging.reload();
                        }, 1000)
                    } else {
                        this.$comFun.toast(res_2.message);
                    }
                    break;
                default:
                    break;
            }
        },
        getStatusInfo(status, type) {
            switch (status) {
                case 1:
                    return type == 'color' ? '#1C5FF8' : '等待中'
                case 2:
                    return type == 'color' ? '#F8211C' : '成功'
                case 3:
                    return type == 'color' ? '#F8B725' : '驳回'
                default:
                    break;
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
